{
	draw(stepData,ctx){
		let {step,state} = stepData
		let fp = step[0]
		let sp = step[1]
		let ep = step[2]

		ctx.save()
		ctx.merge(state,{
			lineDash:[],
			lineWidth:1
		})
		if(ep){
			let s = Math.tan360(sp.y-fp.y,sp.x-fp.x)
			let e = Math.tan360(ep.y-fp.y,ep.x-fp.x)
			let r = Math.distance(fp,ep)
			ctx.save()
			ctx.lineDash=[2]
			ctx.beginPath()
			ctx.moveTo(fp.x,fp.y)
			ctx.arc(
				fp.x,
				fp.y,
				r,
				s,
				e
				)
			ctx.stroke()
			ctx.restore()

			this.drawATip(step,ctx)
			this.drawRule(fp,ep,ctx)
		}
		this.drawRTip(step,ctx)
		this.drawRule(fp,sp,ctx)
		this.point(fp,ctx)
		ctx.restore()
	},
	drawRTip(step,ctx){
		let fp = step[0]
		let sp = step[1]
		let ep = step[2]||step[1]
		let r = Math.distance(fp,ep)
		let s = Math.tan360(sp.y-fp.y,sp.x-fp.x)
		ctx.save()
		ctx.fillStyle = ctx.strokeStyle
		ctx.fontSize=this.fontSize
		ctx.textAlign="center"
		ctx.translate(fp.x,fp.y)
		ctx.rotate(s)
		this.linend([{x:0,y:0},{x:0,y:-15}],ctx)
		this.linend([{x:r,y:0},{x:r,y:-15}],ctx)
		this.linend([{x:0,y:-5},{x:r,y:-5}],ctx)
		ctx.translate(r/2,0)
		r = (r/(ctx.ratio*ctx.zoom)).toFixed(2)
		ctx.fillText(`${r}`,0,-15)
		ctx.restore()
	},
	drawATip(step,ctx){
		let fp = step[0]
		let sp = step[1]
		let ep = step[2]

		let s = Math.tan360(sp.y-fp.y,sp.x-fp.x)
		let e = Math.tan360(ep.y-fp.y,ep.x-fp.x)
		let r = Math.distance(fp,ep)

		let ta = e>s?(s+e)/2:Math.PI+(s+e)/2
		let angle = e>s?(e-s):2*Math.PI-(s-e)
			angle = (angle*180/Math.PI).toFixed(2)
		let tx = angle>30?20:r+10
			tx = r*ctx.zoom<50?r+10:tx

		ctx.save()
		ctx.fillStyle=ctx.strokeStyle
		ctx.translate(fp.x,fp.y)
		
		ctx.rotate(ta);
			ctx.save()
			ctx.textAlign="left"
			ctx.fontSize=10
			ctx.translate(tx,0)
			let text = `${angle}°`
			ctx.fillText(text,0,0)	
			ctx.restore()
		ctx.restore()
	},
	drawRule(fp,sp,ctx){
		let angle = Math.tan360(sp.y-fp.y,sp.x-fp.x)
		let {width,height} = document.pageRect()
		//窗口对角尺寸
		let pageSize = Math.pow(width*width+height*height,.5)

		ctx.save()
		ctx.translate(fp.x,fp.y)
		ctx.rotate(angle)
		
		let ratio = ctx.ratio
		let div = 5
		for(let i=0;i<pageSize;i+=div){
			let r = i%ratio?3:6
			this.linend([{x:i,y:0},{x:i,y:r}],ctx)
		}
		this.linend([{x:0,y:0},{x:pageSize,y:0}],ctx)
		ctx.restore()
	}
}